<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Peulis | Travel Agency & Tourism HTML Template">
    <meta name="keyword" content="travel, tourism, agency, tourist">
    <meta name="author" content="Themescare">
    <!-- Title -->
    <title>Peulis</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="../../static/front/img/favicon/favicon-32x32.png" th:href="@{/css/front/zerogrid.css}">
    <!--Bootstrap css-->
    <link rel="stylesheet" href="../../static/front/css/bootstrap.css" th:href="@{/front/css/bootstrap.css}">
    <!--Font Awesome css-->
    <link rel="stylesheet" href="../../static/front/css/font-awesome.css" th:href="@{/front/css/font-awesome.css}">
    <!--Flaticon css-->
    <link rel="stylesheet" href="../../static/front/flaticon/flaticon.css" th:href="@{/front/flaticon/flaticon.css}">
    <!--Animatedheadline css-->
    <link rel="stylesheet" href="../../static/front/css/jquery.animatedheadline.css" th:href="@{/front/css/jquery.animatedheadline.css}">
    <!--Magnific css-->
    <link rel="stylesheet" href="../../static/front/css/magnific-popup.css" th:href="@{/front/css/magnific-popup.css}">
    <!--Owl-Carousel css-->
    <link rel="stylesheet" href="../../static/front/css/owl.carousel.min.css" th:href="@{/front/css/owl.carousel.min.css}">
    <link rel="stylesheet" href="../../static/front/css/owl.theme.default.min.css" th:href="@{/front/css/owl.theme.default.min.css}">
    <!--Animate css-->
    <link rel="stylesheet" href="../../static/front/css/animate.min.css" th:href="@{/front/css/animate.min.css}">
    <!--Datepicker css-->
    <link rel="stylesheet" href="../../static/front/css/jquery.datepicker.css" th:href="@{/front/css/jquery.datepicker.css}">
    <!--Nice Select css-->
    <link rel="stylesheet" href="../../static/front/css/nice-select.css" th:href="@{/front/css/nice-select.css}">
    <!--Slicknav css-->
    <link rel="stylesheet" href="../../static/front/css/slicknav.min.css" th:href="@{/front/css/slicknav.min.css}">
    <!--Site Main Style css-->
    <link rel="stylesheet" href="../../static/front/css/style.css" th:href="@{/front/css/style.css}">
    <!--Responsive css-->
    <link rel="stylesheet" href="../../static/front/css/responsive.css" th:href="@{/front/css/responsive.css}">
    <!--upload css-->
    <link rel="stylesheet" href="../../static/upload/css/upload.css" th:href="@{/upload/css/upload.css}"  />
</head>
<body>
<!-- Header Area Start -->
<header class="peulis-header-area">
    <!-- Header Top Area Start -->
    <div class="header-top-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-6">
                    <div class="header-top-left">
                        <p>
                            <i class="fa fa-envelope"></i>
                            info@example.com
                        </p>
                        <p>
                            <i class="fa fa-phone"></i>
                            1 562 867 5309
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6">
                    <div class="header-top-right">
                        <div class="header-top-auth">
                            <ul>
                                <li><i class="fa fa-user"></i></li>
                                <li class="separator"><a href="sign.html" th:href="@{/sign/login}">登录</a></li>
                                <li><a href="register.html">注册</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header Top Area End -->

    <!-- Main Header Area Start -->
    <div class="main-header-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="header_inn">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="site-logo">
                                    <a href="index.html">
                                        <img src="../../static/front/img/logo.png" alt="Peulis" th:src="@{/front/img/logo.png}"/>
                                    </a>
                                </div>
                                <!-- Responsive Menu Start -->
                                <div class="peulis-responsive-menu"></div>
                                <!-- Responsive Menu End -->
                            </div>
                            <div class="col-lg-7">
                                <div class="mainmenu">
                                    <nav>
                                        <ul id="navigation_menu">
                                            <li class="active"><a href="index.html">首页</a></li>
                                            <li>
                                                <a href="#">视频</a>
                                                <ul>
                                                    <li><a href="about.html">mp4</a></li>

                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">音频</a>
                                                <ul>
                                                    <li><a href="destination-three.html">mp3</a></li>

                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">图片</a>
                                                <ul>
                                                    <li><a href="tour-sidebar.html">jpg</a></li>

                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">Office</a>
                                                <ul>
                                                    <li><a href="blog.html">PPT</a></li>
                                                    <li><a href="single-blog.html">Excel</a></li>
                                                    <li><a href="single-blog.html">Word</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">其他文件</a>
                                                <ul>
                                                    <li><a href="product.html">Else</a></li>

                                                </ul>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="header_action">
                                    <ul>
                                        <li class="header-search">
                                            <a href="#" class="search-btn">
                                                <i class="fa fa-search"></i>
                                            </a>
                                            <div class="search-box search-elem">
                                                <span class="search-close"></span>
                                                <div class="inner row">
                                                    <form>
                                                        <input type="search" placeholder="请输入你要搜索的内容...">
                                                        <button type="submit"><i class="fa fa-search"></i></button>
                                                    </form>
                                                </div>
                                            </div>
                                        </li>
                                        <li><a href="#" id="sidenav-toggle"><i class="fa fa-bars"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main Header Area End -->
</header>
<!-- Header Area End -->

<!-- 中部开始 -->
<section class="peulis-breadcrumb-area">
    <div class="breadcrumb-top">
        <div class="container">
            <div class="col-lg-12">
                <div class="breadcrumb-box">
                    <h2>投稿中心</h2>
                    <!--                      <ul class="breadcrumb-inn">-->
                    <!--                        <li><a href="index.html">Home</a></li>-->
                    <!--                        <li class="active"><a href="#">Checkout</a></li>-->
                    <!--                      </ul>-->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 中部结束 -->


<!-- Checkout Page Area Start -->
<section class="checkout-page-area section_70">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="checkout-left-box">
                    <h3>投稿中心</h3>
                    <div id="upload">
                        注意：<br>
                        1.上传的视频文件单文件不能超过4G；<br>
                        2.上传的视频格式必须*.mp4 *.rar。
                    </div>
                    <div id="upbt">
                        <div id="btn"><input type="button" class="uploadbtn" value="选择文件" onClick="uploadphoto.click()" id="select"><input
                                type="button" value="开始上传" id="ups"></div>
                    </div>
                    <div style="width:100%;margin:10px auto;overflow:hidden; margin-top:10px;">
                        <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
                            <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none" onChange="filesize(this)" />
                        </form>
                        <table width="100%" id="table" cellpadding="1" cellspacing="1">
                            <tr bgcolor="#4a5464" align="center">
                                <td width="30%">文件名</td>
                                <td width="10%">文件大小</td>
                                <td width="40%">上传进度</td>
                                <td width="12%">上传状态</td>
                                <td width="8%">操作</td>
                            </tr>
                            <tr id="list" style="background:url(css/bg.jpg); display:none;">
                                <td align="center">
                                    <div id="text"></div>
                                </td>
                                <td align="center">
                                    <div id="big"></div>
                                </td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped"><span class="percent">0%</span></div>
                                    </div>
                                </td>
                                <td align="center">
                                    <div id="uped">等待上传</div>
                                </td>
                                <td><a href="javascript:viod(0)" id="del">移除</a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Checkout Page Area End -->


<!-- Footer Area Start -->
<footer class="peulis-footer-area">
    <div class="footer-top-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="single-footer">
                        <p>ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.ipsum dolor sit amet, consectetur </p>
                        <div class="footer-logo">
                            <a href="index.html">
                                <img src="assets/img/footer-logo.png" alt="Peulis" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="single-footer">
                        <h3>About Us</h3>
                        <ul>
                            <li><a href="#">Why Us</a></li>
                            <li><a href="#">Why Touring</a></li>
                            <li><a href="#">Reviews</a></li>
                            <li><a href="#">Travel Insurance</a></li>
                            <li><a href="#">Programme</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="single-footer">
                        <h3>Support</h3>
                        <ul>
                            <li><a href="#">Account</a></li>
                            <li><a href="#">Client Area</a></li>
                            <li><a href="#">Privacy & Policy</a></li>
                            <li><a href="#">Author Hangout</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="single-footer">
                        <h3>Pay Safely</h3>
                        <p>Eiusmod tempor incididunt utbor etian dolm magna aliqua enim minim</p>
                        <div class="payment_image">
                            <img src="assets/img/creditcard-logo.png" alt="Payment Card" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-bottom-box">
                        <div class="row">
                            <div class="col-lg-6 col-sm-6">
                                <div class="footer-bottom-left">
                                    <p>&copy; Copyright Peulis - By <a href="#">Themescare</a></p>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <div class="footer-bottom-left">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href="#"><i class="fa fa-skype"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- Footer Area End -->


<!-- Sidebar Navigation Start -->
<div class="ct-sidenav">
    <button class="close"><i class="fa fa-times"></i></button>
    <img src="assets/img/logo.png" alt="Site Logo" />
    <div class="sidenav-info">
        <p>Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since when an unknown printer took a galley of type and scrambled it to make a type specimen book.printing and typesetting industry It has survived not only five centuries.</p>
        <ul class="sidenav-contact-info">
            <li>
                <i class="fa fa-map-marker"></i>
                <p>29 Division Pt <span>New York, NY 10002, USA</span></p>
            </li>
            <li>
                <i class="fa fa-phone"></i>
                <p> +0 (321) 984 754 <span>Give us a call</span></p>
            </li>
            <li>
                <i class="fa fa-envelope"></i>
                <p> support@example.com<span>24/7 online support</span></p>
            </li>
        </ul>
    </div>
    <div class="sidenav-social">
        <h3>Follow Us</h3>
        <ul>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        </ul>
    </div>
</div>
<!-- Sidebar Navigation End -->


<!--Jquery js-->
<script src="../../static/front/js/jquery.min.js" th:src="@{/front/js/jquery.min.js}"></script>
<script type="text/javascript" src="../../static/upload/js/jquery.form.js" th:src="@{/upload/js/jquery.form.js}"></script>
<!-- Popper JS -->
<script src="../../static/front/js/popper.min.js" th:src="@{/front/js/popper.min.js}"></script>
<!--Bootstrap js-->
<script src="../../static/front/js/bootstrap.min.js" th:src="@{/front/js/bootstrap.min.js}"></script>
<!--Owl-Carousel js-->
<script src="../../static/front/js/owl.carousel.min.js" th:src="@{/front/js/owl.carousel.min.js}"></script>
<!--Animatedheadline js-->
<script src="../../static/front/js/jquery.animatedheadline.min.js" th:src="@{/front/js/jquery.animatedheadline.min.js}"></script>
<!--Slicknav js-->
<script src="../../static/front/js/jquery.slicknav.min.js" th:src="@{/front/js/jquery.slicknav.min.js}"></script>
<!--Magnific js-->
<script src="../../static/front/js/jquery.magnific-popup.min.js" th:src="@{/front/js/jquery.magnific-popup.min.js}"></script>
<!-- Datepicker -->
<script src="../../static/front/js/jquery.datepicker.min.js" th:src="@{/front/js/jquery.datepicker.min.js}"></script>
<!--Nice Select js-->
<script src="../../static/front/js/jquery.nice-select.min.js" th:src="@{/front/js/jquery.nice-select.min.js}"></script>
<!-- Way Points JS -->
<script src="../../static/front/js/waypoints-min.js" th:src="@{/front/js/waypoints-min.js}"></script>
<!--Main js-->
<script src="../../static/front/js/main.js" th:src="@{/front/js/main.js}"></script>
<!-- 上传 js -->
<script type="text/javascript">
    function filesize(ele) {
        var filesize = (ele.files[0].size / 1024 / 1024).toFixed(2);
        $('#big').html(filesize + "MB");
        $('#text').html(ele.files[0].name);
    }
    $(document).ready(function(e) {
        var progress = $(".progress");
        var progress_bar = $(".progress-bar");
        var percent = $('.percent');
        $("#del").click(function() {
            var objFile = document.getElementsByTagName('input')[2];
            objFile.value = "";
            $("#list").hide();
        });
        $("#uploadphoto").change(function() {
            $("#list").show();
        });
        $("#ups").click(function() {
            var file = $("#uploadphoto").val();
            if (file != "") {
                $('#uped').html("上传中……");
                $("#myupload").ajaxSubmit({
                    dataType: 'json', //数据格式为json
                    beforeSend: function() { //开始上传
                        var percentVal = '0%';
                        progress_bar.width(percentVal);
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%'; //获得进度
                        progress_bar.width(percentVal); //上传进度条宽度变宽
                        percent.html(percentVal); //显示上传进度百分比
                    },
                    success: function(data) {
                        if (data.status == 1) {
                            var src = data.url;
                            $('#uped').html("上传成功");
                            //var attstr= '<img src="'+src+'">';
                            //$(".imglist").append(attstr);
                            //$(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
                        } else {
                            $(".res").html(data.content);
                        }
                    },
                    error: function(xhr) { //上传失败
                        alert("上传失败");
                    }
                });
            } else {
                alert("请选择视频文件");
            }
        });

    });
</script>
</body>
</html>

